import ProForm, { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Descriptions, Divider, Typography } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef } from 'react';

interface DetailsGongzhonghaoProps {
  task: PromotionData.TaskDetails;
  statistics: boolean;
}

const DetailsGongzhonghao: React.FC<DetailsGongzhonghaoProps> = ({ task, statistics }) => {
  const restFormRef = useRef<ProFormInstance>();

  return (
    <DrawerForm
      key="details_promotion_task_drawer_form_gongzhonghao"
      formRef={restFormRef}
      title={<>{task.name}</>}
      drawerProps={{
        destroyOnClose: true,
      }}
      trigger={<a>{task.name}</a>}
      submitter={false}
    >
      <ProForm.Group title={'任务内容'}>
        <Descriptions>
          <Descriptions.Item label="标题">{task?.name}</Descriptions.Item>
        </Descriptions>
        <Typography.Paragraph>
          <blockquote>{task?.route}</blockquote>
        </Typography.Paragraph>

        {statistics && (
          <Descriptions>
            <Descriptions.Item label="阅读时长（秒）">{task?.isDemandReadTime}</Descriptions.Item>
            <Descriptions.Item label="是否分享">
              {task?.isDemandShare === 0 ? '否' : '是'}
            </Descriptions.Item>
            {task?.isDemandShare === 1 && (
              <Descriptions.Item label="分享后是否需要第三方阅读">
                {task?.isDemandShareRead === 0 ? '否' : '是'}
              </Descriptions.Item>
            )}
          </Descriptions>
        )}

        {task?.remarks !== undefined && task.remarks !== null && (
          <Descriptions>
            <Descriptions.Item label="备注">{task?.remarks}</Descriptions.Item>
          </Descriptions>
        )}
      </ProForm.Group>
      {statistics && (
        <>
          <Divider />
          <ProForm.Group title={'统计数据'}></ProForm.Group>
          <Descriptions>
            <Descriptions.Item label="参与">{task?.statisticJoinCount}</Descriptions.Item>
          </Descriptions>
          <Descriptions>
            <Descriptions.Item label="执行">{task?.statisticExecuteCount}</Descriptions.Item>
          </Descriptions>
          {/* <ProTable<CuesTopicData.UserAccount>
            ghost
            columns={[
              {
                title: '单位',
                key: 'or',
                dataIndex: 'organizationName',
                hideInSearch: true,
                width: 200,
              },
              {
                title: '姓名',
                key: 'name',
                dataIndex: 'name',
              },
            ]}
            request={async (params = {}) => {
              const response = await getShareAccountPage({
                ...params,
              });
              return Promise.resolve({
                data: response.data.data,
                total: response.data.total,
                success: response.code === 0,
              });
            }}
            rowKey="id"
            tableLayout="fixed"
            dateFormatter="string"
            headerTitle={false}
            bordered
            options={{
              search: {
                name: 'name',
                onSearch: (keyword: string) => {
                  return true;
                },
              },
            }}
            search={false}
            pagination={{
              showQuickJumper: false,
              showSizeChanger: false,
              defaultPageSize: 100,
              showLessItems: false,
            }}
          /> */}
        </>
      )}
    </DrawerForm>
  );
};
export default DetailsGongzhonghao;
